<template>
  <el-form :model="form" style="padding: 40px">
    <pro-layout-contaner>
      <pro-select label="select1" labelWidth="60px" v-model="form.value1" :dataSource="datas1"/>
      <pro-select label="select2" labelWidth="60px" v-model="form.value2" :dataSource="datas2"/>
    </pro-layout-contaner>
  </el-form>
</template>

<script>
import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
import { get, post, postForm } from "mars-pro/src/pro/request";
function getResponseData(request, response) {
  response.$delay(1000, {
    list: [
      { code: "CHN", name: "中国", filter: "" },
      { code: "USA", name: "美国", filter: "" },
      { code: "ENG", name: "英国", filter: "" },
      { code: "CAP", name: "各国首都", filter: "" },
      { code: "A01", name: "北京", filter: "CHN,CAP" },
      { code: "A02", name: "上海", filter: "CHN" },
      { code: "A03", name: "广州", filter: "CHN" },
      { code: "A04", name: "深圳", filter: "CHN" },
      { code: "B01", name: "纽约", filter: "USA,CAP" },
      { code: "B02", name: "华盛顿", filter: "USA" },
      { code: "B03", name: "芝加哥", filter: "USA" },
      { code: "C01", name: "伦敦", filter: "ENG,CAP" },
      { code: "C02", name: "利物浦", filter: "ENG" },
      { code: "C03", name: "爱丁堡", filter: "ENG" },
    ],
  });
}
export default {
  data() {
    return {
      form: {
        value1: null,
        value2: null,
      },
    };
  },

  watch: {
    "form.value1": function () {
      this.form.value2 = null;
    },
  },

  mixins: [
    dataSource("chartData", post("/api/mock").mockData(getResponseData), {
      dataField: "list",
      fieldMap: {
        value: "code",
        label: "name",
      },
    }),
  ],
  computed: {
    datas1(){
        if (!this.chartData.formatDatas){
            return []
        }
        return this.chartData.formatDatas.filter(r => !r.filter)
    },
     datas2(){
        const value1 = this.form.value1
        const hasData = this.chartData.formatDatas
        if (!hasData || !value1){
            return []
        }
        return this.chartData.formatDatas.filter(r => r.filter.indexOf(value1) > -1)
    }
  }
};
</script>

<style>
</style>